<template>
  <div style="padding: 10px">
    <t-card title="生产订单">
      <t-form label-align="right" layout="inline" label-width="80px">
        <t-form-item label="订单编号" name="FBillNo">
          <t-input v-model="formData.FBillNo" placeholder="请输入订单编号" />
        </t-form-item>
      
      </t-form>
    </t-card>
    <div style="margin-top: 10px; display: flex; flex-direction: column">
      <t-space align="end" style="align-self: flex-end">
        <t-button theme="primary" @click="loadData">查询</t-button>
        <t-button variant="outline" theme="primary" @click="clickAdd">新增</t-button>
      </t-space>
      <t-table
        row-key="FID"
        :data="dataList"
        :columns="columns"
        :resizable="true"
        :loading="loading"
        :stripe="stripe"
        :selected-row-keys="selectedRowKeys"
        :active-row-type="single"
        :select-on-row-click="true"
        bordered
        :hover="true"
        table-layout="auto"
        size="small"
        :pagination="pagination"
        cell-empty-content="-"
        resizable
        lazy-load
        @select-change="rehandleSelectChange"
        @row-click="handleRowClick"
      >
        <template #operation="{ row }">
          <t-button theme="primary" hover="color" @click="handleClickEdit(row)"> 编辑 </t-button>
        </template>
      </t-table>
    </div>

    <detail ref="detailRef" @update-data="loadData" />
  </div>
</template>

<script>
import { ref, reactive, computed, onMounted } from 'vue';
import columns from './columns/index';
import { queryOrderList } from '@/service/order';

import Detail from './components/detail.vue';
import router from '@/router';

export default {
  components: { Detail },
  setup(props) {
    const formData = reactive({ FMATERIALID: '' });
    // const formData = reactive({ FMATERIALID: 111204, FDocumentStatus: '', FName: '伺服电机' })
    const detailRef = ref();
    const total = ref(300);
    const loading = ref(false);
    const selectedRowKeys = ref([]);

    const curr_page = ref(1);
    const page_size = ref(10);

    const dataList = ref([]);
    const pagination = computed(() => {
      return {
        defaultCurrent: 1,
        defaultPageSize: page_size.value,
        total: total.value,
        onChange: (pageInfo) => {
          const { current, pageSize } = pageInfo;
          curr_page.value = current;
          page_size.value = pageSize;
          loadData();
        },
      };
    });
    const rehandleSelectChange = (value, { selectedRowData }) => {
      selectedRowKeys.value = value;
      console.log('rehandleSelectChange', selectedRowData);
    };
    const handleRowClick = (e) => {
      console.log(e);
    };

    const handleClickEdit = (row) => {
      // detailRef.value.openModal(row);
      router.push({ name: 'materialEdit', params: { id: row.FMATERIALID } });
    };

    const clickAdd = () => {
      // console.log('detailRef', detailRef);
      // detailRef.value.openModal();
      router.push({ name: 'materialAdd' });
    };

    const loadData = async () => {
      loading.value = true;
      const res = await queryOrderList({
        ...formData,
        curr_page: curr_page.value,
        page_size: page_size.value,
      });
      dataList.value = res.dataList;
      // total.value = res.length;
      total.value = res.total;
      console.log('res', res);
      loading.value = false;
    };

    onMounted(() => {
      loadData();
    });

    return {
      detailRef,
      columns,
      pagination,
      total,
      formData,
      dataList,
      loadData,
      handleClickEdit,
      loading,
      clickAdd,
      handleRowClick,
      curr_page,
      page_size,
      selectedRowKeys,
      rehandleSelectChange,
    };
  },
};
</script>
